import React, { useEffect } from 'react';
import TRCheckboxModal from '../TRCheckboxModal';
import { Select } from 'antd';

export const MyStations = (props: any) => {
  const {
    value = [],
    onChange,
    options = [],
    treeData = [],
    optionAll = [],
    className,
    width = 240,
  } = props;
  const title = '交易单元';
  const isEmpty = !treeData.length;
  useEffect(() => {
    if (!value.length) {
      onChange(optionAll);
    }
  }, [optionAll]);
  const onHandleModal = async () => {
    if (isEmpty) return;
    const result = await TRCheckboxModal.show({
      title,
      value,
      treeData,
    });
    if (result?.index === 1 && result.checkedKeys.length) {
      onChange(result.checkedKeys);
    }
    TRCheckboxModal.dismiss();
  };
  const onDeselect = () => {
    if (value.length === 1) {
      onChange(optionAll);
    }
  };
  return (
    <div className={className}>
      <Select
        value={
          !value.length
            ? '请选择参考年份'
            : value.length === options.length
            ? '全部'
            : `${value.length}项/${options.length}项`
        }
        style={{
          width,
        }}
        // options={options}
        // mode="multiple"
        // maxTagCount={1}
        // maxTagTextLength={value?.length > 2 ? 2 : 4}
        open={false}
        showSearch={false}
        showArrow={true}
        onClick={onHandleModal}
        onChange={onChange}
        onDeselect={onDeselect}
      />
      {/* <Select
        style={{
          width,
          display: optionAll.length !== value?.length && value?.length ? 'none' : 'block',
        }}
        placeholder="全部交易单元"
        onClick={onHandleModal}
        open={false}
        onChange={onChange}
      /> */}
    </div>
  );
};
